<script setup lang="ts">
import { metaInfoKey } from '@/services/injectKeys';
import { onErrorCaptured, ref, inject } from 'vue'

const metaInfos = inject(metaInfoKey)!

const errInfo = ref({
    has: false,
    msg: ''
})

onErrorCaptured((err, ins, info) => {
    console.log(err);


    if (errInfo.value.has) {
        errInfo.value.msg + '\n' + err.message
    } else {
        errInfo.value = {
            has: true,
            msg: err.message
        }
    }

    return false
})

</script>

<template>
    <slot v-if="!errInfo.has"></slot>

    <div class="err" v-else>
        <p>error[version:{{ metaInfos.version }}]:</p>
        <p>{{ errInfo.msg }}</p>
    </div>
</template>

<style scoped lang="less">
.err {
    width: 100%;
    color: red;
    border: 2px dashed rgb(186, 73, 73);
    padding: 0.8rem;

    &>p:first-child {
        font-size: 1.2rem;
        margin: 0.2rem 0;
    }
}
</style>